<template>
    <div>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-row style="position: relative">
            <el-col
              :span="25"
              style="overflow: auto; width: 100%; background-color: #fff"
              :style="{ height: heightTree }"
            >
              <el-menu
                default-active="1"
                class="el-menu-vertical-demo"
              >
                <el-submenu index="1">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>导航一</span>
                  </template>
                    <el-menu-item index="1-3">选项3</el-menu-item>
                </el-submenu>
                <el-menu-item index="2">
                  <i class="el-icon-menu"></i>
                  <span slot="title">导航二</span>
                </el-menu-item>
                <el-menu-item index="3">
                  <i class="el-icon-document"></i>
                  <span slot="title">导航三</span>
                </el-menu-item>
                <el-menu-item index="4">
                  <i class="el-icon-setting"></i>
                  <span slot="title">导航四</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="18">
          <div class="thumbnail" :style="{ height: heightY }">
              <img
                v-for="(image, index) in images"
                :key="index"
                :src="image.src"
                :style="{ width: '140px', height: '200px', border: index === selectedImageIndex ? '2px solid red' : '' }"
                @click="selectImage(index)"
              >
            </div>
            <div class="bigPicture" :style="{ height: heightY }"> 
              <img :src="selectedImageIndex !== null ? images[selectedImageIndex].src : ''" alt="" style="width: 100%; height: 100%;">
            </div>
        </el-col>
      </el-row>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        heightY: window.innerHeight - 145 + "px",
        heightTree: window.innerHeight - 140 + "px",
        tabPosition:"left",
        images:[
          {
            src:'https://img2.baidu.com/it/u=870159714,3719145608&fm=253&fmt=auto&app=138&f=JPEG?w=351&h=500',
          },
          {
            src:'https://img2.baidu.com/it/u=1361506290,4036378790&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
          },{
            src:'https://img2.baidu.com/it/u=55994022,1030234355&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
          },{
            src:'https://img2.baidu.com/it/u=1330959003,1248282479&fm=253&fmt=auto&app=120&f=JPEG?w=450&h=780',
          },{
            src:'https://img0.baidu.com/it/u=1886047342,1826501707&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500',
          },{
            src:'https://img2.baidu.com/it/u=1368879157,3680317647&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
          },{
            src:'https://img0.baidu.com/it/u=1880899726,3824907986&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
          },{
            src:'https://img1.baidu.com/it/u=1582055235,2869528729&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=716',
          },
        ],
        selectedImageIndex: 0,
      };
    },
    methods: {
      selectChange() {},
      selectImage(index) {
      this.selectedImageIndex = index;
    }
    },
  };
  </script>
  
  <style scoped>
  >>>.el-menu-item{
    margin-top:5px;
  }
  .thumbnail{
    width: 150px;
    overflow-y: scroll;
    float: left;
  }
  .bigPicture{
    float: left;
    width: 500px;
  }
  
  </style>
  